<template>
	<div id="newVenue">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title" @click="cancel()">场馆管理</span>
			<span>/ {{actionText}}</span>

		</div>
		<div class="list">
			<div class="list_head">
				<span>场馆信息</span>
				<el-button class="save" type="primary" @click="save()">保存</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">取消</el-button>
			</div>
			<el-form ref="venueForm" :model="venueForm" :rules="rules" label-width="90px">
				<el-form-item label="场馆名称:" prop="name">
					<el-input v-model="venueForm.name" placeholder="请输入场馆名称，不超过20个字符" class="el-input"></el-input>
				</el-form-item>
				<el-form-item label="场馆地址:" prop="campusZone">
					<el-select v-model="venueForm.campusZone" style="width:350px;">
						<el-option v-for='item in campusZones' :label='item.name' :value='item.unid' :key="item.unid">
						</el-option>
					</el-select>
					<div class="tips" v-if="actionText =='编辑场馆'">修改场馆校区时，场地所属校区将随之更改</div>
				</el-form-item>
				<el-form-item label="开馆时间:" required>
					<el-time-select placeholder="起始时间" v-model="venueForm.startTime" :picker-options="{start: '00:00',step: '00:30', end: '23:30'}"
					 style="width:200px;"></el-time-select>
					<el-time-select placeholder="结束时间" v-model="venueForm.endTime" :picker-options="{start: '00:00',step: '00:30',end: '23:30',minTime: venueForm.startTime}"
					 style="width:200px;"></el-time-select>
				</el-form-item>
				<el-form-item label="联系电话:" prop="linkPhone" required>
					<el-input v-model="venueForm.linkPhone" placeholder="请输入联系电话" class="el-input"></el-input>
				</el-form-item>
				<el-form-item label="场馆详情:" prop="venueDetail">
					<el-input type="textarea" :autosize="{minRows: 5}" v-model="venueForm.venueDetail" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="运动项目:" prop="sportItem" required>
					<el-cascader :options="options" v-model="sportType" @change="addSport()" @active-item-change="handleItemChange">
					</el-cascader>
					<div class="sportContain">
						<span v-for="item in venueForm.sportItem" :key="item" v-if="item" class="sportSpan">{{item.sportItemName}}
							<i @click="deleteSport(item)" class="el-icon-circle-close"></i>
						</span>
					</div>
					<div class="tips" v-if="actionText =='编辑场馆'">删除运动项目后，该运动项目对应的场地将相应删除</div>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			let checkPhone = (rule, value, callback) => {
				if (value) {
					if (!/^1[34578]\d{9}$/.test(value)) {
						callback("请输入格式正确的联系电话");
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入联系电话"));
				}
			};
			return {
				venueId: "0",
				actionText: "新增场馆",
				campusZones: [],
				sportType: [],
				venueForm: {
					name: "",
					campusZone: "",
					startTime: "",
					endTime: "",
					venueDetail: "",
					linkPhone: "",
					sportItem: []
				},
				options: [],
				rules: {
					name: [
						{ required: true, message: "请输入场馆名称", trigger: "blur" },
						{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
					],
					campusZone: [
						{ required: true, message: "请选择场馆所属校区", trigger: "change" }
					],
					linkPhone: [{ validator: checkPhone, trigger: "blur" }],
					venueDetail: [
						{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
					]
				}
			};
		},
		mounted() {
			this.getCampus();
			this.venueId = this.$util.getUrlParam("venueId");
			if (this.venueId !== "0") {
				this.actionText = "编辑场馆";
				this.getDetail(this.venueId);
			}
			this.getSportType();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//保存场馆
			save() {
				let url = this.$util.domain + "/erp/api/v20/venue/edit";
				if (!this.venueForm.startTime || !this.venueForm.endTime) {
					this.$util.errorMsg("请选择场馆开馆时间");
					return false;
				}

				if (this.venueForm.sportItem.length == 0) {
					this.$util.errorMsg("请选择运动项目");
					return false;
				}

				this.$refs.venueForm.validate(valid => {
					if (valid) {
						let unName;
						this.campusZones.forEach((item, index) => {
							if (item.unid == this.venueForm.campusZone) {
								unName = item.name;
							}
						});

						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								unName: unName,
								id: parseInt(this.venueId),
								name: this.venueForm.name,
								endTime: this.venueForm.endTime,
								linkPhone: this.venueForm.linkPhone,
								startTime: this.venueForm.startTime,
								introduction: this.venueForm.venueDetail,
								unid: parseInt(this.venueForm.campusZone),
								venueSportsItemList: this.venueForm.sportItem
							})
						}).then(response => {
							if (response.data.error == 10000) {
								this.$util.successMsg("保存成功");
								location.href = "/#/venueManage";
							} else {
								this.$util.errorMsg(response.data.message);
							}
						}, (response) => {
							this.$util.errorMsg(response.data.message);
						});
					}
				});
			},
			//返回
			cancel() {
				location.href = "/#/venueManage";
			},
			//编辑场馆是获取场馆详情
			getDetail(id) {
				let url = this.$util.domain + "/erp/api/v20/venue/detail";

				this.$http({
					url,
					method: "GET",
					params: {
						venueId: id
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						let now = new Date().format("yyyy/MM/dd");
						this.venueForm = {
							name: dataObj.name,
							endTime: dataObj.endTime,
							linkPhone: dataObj.linkPhone,
							startTime: dataObj.startTime,
							campusZone: dataObj.unid + "",
							venueDetail: dataObj.introduction,
							sportItem: dataObj.sportTypeItems
						};
					}
				});
			},
			// 获取所有运动类型
			getSportType() {
				let url = this.$util.domain + "/erp/api/v20/tools/sporttype";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						if (dataList && dataList.length > 0) {
							dataList.forEach((item, index) => {
								this.options.push({
									children: [],
									label: item.name,
									value: item.id + ""
								});
							}, this);
						}
					}
				}, (response) => {
					this.$util.errorMsg(response.data.message);
				});
			},
			handleItemChange(val) {
				let url = this.$util.domain + "/erp/api/v20/tools/sportitem";

				this.$http({
					method: "GET",
					url: url,
					params: {
						sportTypeId: val[0]
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						if (dataList && dataList.length > 0) {
							this.options.forEach((item, index) => {
								if (item.value == val[0]) {
									dataList.forEach(item => {
										item.value = item.id + "";
										item.label = item.name;
									});
									this.options[index].children = dataList;
								}
							});
						}
					}
				}, (response) => {
					this.$util.errorMsg(response.data.message);
				});
			},
			getCampus() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/campuszones";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						if (dataList && dataList.length > 0) {
							for (let i = 0; i < dataList.length; i++) {
								this.campusZones.push({
									name: dataList[i].name,
									unid: dataList[i].unid + ""
								});
							}
						}
					}
				}, (response) => {
					this.$util.errorMsg(response.data.message);
				});
			},
			// 添加选中的运动
			addSport() {
				let sportArr = this.sportType;
				let item = {};
				for (let i = 0; i < this.options.length; i++) {
					if (sportArr[0] == this.options[i].value) {
						for (let j = 0; j < this.options[i].children.length; j++) {
							if (sportArr[1] == this.options[i].children[j].value) {
								item.parentSportTypeName = this.options[i].label;
								item.parentSportTypeId = this.options[i].value * 1;
								item.sportItemName = this.options[i].children[j].label;
								item.sportItemId = this.options[i].children[j].value * 1;
							}
						}
					}
				}
				for (let i = 0; i < this.venueForm.sportItem.length; i++) {
					if (item.sportItemId == this.venueForm.sportItem[i].sportItemId) {
						this.venueForm.sportItem.splice(i, 1);
					}
				}
				if (item) {
					this.venueForm.sportItem.push(item);
				}
			},
			// 删除选中的运动
			deleteSport(item) {
				for (let i = 0; i < this.venueForm.sportItem.length; i++) {
					if (item == this.venueForm.sportItem[i]) {
						this.venueForm.sportItem.splice(i, 1);
					}
				}
			}
		}
	};
</script>

<style scoped>
	#newVenue {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	.title {
		color: #0398ff;
	}

	#newVenue .el-input {
		display: inline-block;
		width: 40%;
	}

	#newVenue .sportContain {
		margin-top: 10px;
		width: 700px;
		height: 135px;
		border: solid 1px #bfcbd9;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	#newVenue .sportSpan {
		display: block;
		text-align: center;
		float: left;
		height: 30px;
		line-height: 30px;
		padding: 0 15px 0 15px;
		border: solid 1px #999;
		border-radius: 5px;
		margin: 10px;
		box-sizing: border-box;
		font-size: 12px;
		position: relative;
		cursor: pointer;
	}

	.tips {
		color: red;
		font-size: 12px;
	}
</style>